<template>
  <div class="page">
    <z-header>购物车</z-header>

       <shopcart-box :cartList="cartList" 
       @delcartitem="handDelCartItem"
       @changeCount="handChangeCount"
       > </shopcart-box>

    <recommend></recommend>   

    <van-submit-bar 
    :price="$store.getters.getCountPrice * 100"
    button-text="提交订单" 
    @submit="onSubmit">

      <van-checkbox 
      @click="setAllChecked"
      :value="allChecked" 
      checked-color="#F63515"
        >全选</van-checkbox
      >

    </van-submit-bar>

    
    <tabBar></tabBar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar";
import shopcartBox from "@/components/common/shopcart-box";
import zHeader from "@/components/common/z-header.vue";
import { mapState} from "vuex";
import {deleteCartItem,cartAdd} from "@/api"
import recommend from "@/components/common/recommend.vue"

export default {
  components: {
    tabBar,
    shopcartBox,
    zHeader,
    recommend

  },
  data() {
    return {

    }
  },
  computed:{
      ...mapState(["cartList","allChecked"]),
  },
  created(){
      this.cartData()
  },
  methods:{
    cartData(){
      this.$store.dispatch("getCartData")
    },
    onSubmit(){
      console.log("submit");
    },
    //全选 和 取消全选
    setAllChecked(){
      // console.log("取消全选 或 全选");
      this.$store.dispatch("changeAllChecked")
    },
    //子组件删除数据
    handDelCartItem(item){
      console.log(item);
      deleteCartItem({id:item.id},(res) =>{
        if(res.status === 0){
          console.log(res);
          console.log("删除成功！");
          //删除成功之后再次获取购物车数据
          this.cartData()
        }
      })
    },
    //购物车数据 步进器点击了加号减号后变更后的数据
    handChangeCount(params){
      console.log(params)
      cartAdd(params,res =>{
        console.log(res);
      })
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin";

.page {
  background-color: #f7f7f7;
  padding: 0;
  .van-submit-bar {
    bottom: 100px;
    background-color: #f7f7f7;
  }
}
.van-submit-bar__price{
  margin-left: 10px;
}
</style>